<template>
  <div class="pagination" role="group" aria-label="分页">
    <button type="button" class="btn btn-default btn-white btn-round"
            v-bind:disabled="page === 1"
            v-on:click="selectPage(1)">
      1
    </button>
    <button type="button" class="btn btn-default btn-white btn-round"
            v-bind:disabled="page === 1"
            v-on:click="selectPage(page - 1)">
      上一页
    </button>
    <button v-for="p in pages" v-bind:id="'page-' + p"
            type="button" class="btn btn-default btn-white btn-round"
            v-bind:class="{'btn-primary active':page == p}"
            v-on:click="selectPage(p)">
      {{ p }}
    </button>
    <button type="button" class="btn btn-default btn-white btn-round"
            v-bind:disabled="page === pageTotal"
            v-on:click="selectPage(page + 1)">
      下一页
    </button>
    <button type="button" class="btn btn-default btn-white btn-round"
            v-bind:disabled="page === pageTotal"
            v-on:click="selectPage(pageTotal)">
      {{ pageTotal || 1 }}
    </button>
    &nbsp;
    <span class="m--padding-10">
        每页
        <select v-model="size">
            <option value="1">1</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        条，共【{{ total }}】条
    </span>
  </div>
</template>

<script setup>
import {onMounted, ref, defineEmits} from "vue";

defineOptions({
  name: "Pagination"
})
const props = defineProps({
  list: {
    type: Function,
    required: true
  },
})

const total = ref(0) // 总行数
const size = ref(10)  // 每页条数
const page = ref(0) // 当前页码
const pageTotal = ref(0) // 总页数
const pages = ref([]) // 显示的页码数组
const itemCount = ref(5); // 显示的页码数，比如总共有100页，只显示10页，其它用省略号表示
const emit = defineEmits(['get-message']);

/**
 * 渲染分页组件
 * @param page
 * @param total
 */
const render = (pageNum, totalNum) => {
  page.value = pageNum;
  total.value = totalNum;
  pageTotal.value = Math.ceil(totalNum / size.value);
  pages.value = getPageItems(pageTotal.value, pageNum, itemCount.value);
}

/**
 * 查询某一页
 * @param page
 */
const selectPage = (pageNum) => {
  if (pageNum < 1) {
    page.value = 1;
  }
  if (pageNum > pageTotal.value) {
    page.value = pageTotal.value;
  }
  if (page.value !== pageNum) {
    page.value = pageNum;
    if (props.list) {
      props.list(pageNum);
    }
  }
}

/**
 * 当前要显示在页面上的页码
 * @param total
 * @param current
 * @param length
 * @returns {Array}
 */
const getPageItems = (total, current, length) => {
  let items = [];
  if (length >= total) {
    for (let i = 1; i <= total; i++) {
      items.push(i);
    }
  } else {
    let base = 0;
    // 前移
    if (current - 0 > Math.floor((length - 1) / 2)) {
      // 后移
      base = Math.min(total, current - 0 + Math.ceil((length - 1) / 2)) - length;
    }
    for (let i = 1; i <= length; i++) {
      items.push(base + i);
    }
  }
  return items;
}

defineExpose({
  render,
  size,
  total,
})

</script>

<style scoped>
.pagination {
  vertical-align: middle !important;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
}

.pagination button {
  margin-right: 5px;
}

.btn-primary.active {
  background-color: #2f7bba !important;
  border-color: #27689d !important;
  color: white !important;
  font-weight: 600;
}

/*.pagination select {*/
/*vertical-align: middle !important;*/
/*font-size: 16px;*/
/*margin-top: 0;*/
/*}*/
</style>
